<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="spring"
	uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>新增操作员</title>
 <link rel="styleSheet" href="../../css/bootstrap.min.css">
<script src="jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
	#kong{
	width: 150px;
	}
	#kong1{
	width: 120px;
	}
	#addoperator{
	margin-left:  150px;
	margin-top:-12px;
	width: 100px;
	}
	.form-control{
		width:200px;
	}
	#mainDiv{
		margin-left:300px;
	}
</style>
</head>
<body>
	<br>
	<br>
	<div id="mainDiv">
		<spring:form onsubmit="return check()" action="addOperator.do" method="post" commandName="operator">
			<label>工号</label>
			<input id="userName" name="userName" class="form-control" onblur="checkUserName()" type="text" placeholder="工号">
			<label id="userNameMessage"  class="help-block">请输入有效的用户名</label>
		
			<label>密码</label>
			<input id="password" name="userPWD" class="form-control" type="password" placeholder="密码" onblur="checkPassword()">
			<label id="passwordMessage"  class="help-block">支持字母和数字组合</label>
		
			<label>姓名</label>
			<input id="operatorName" class="form-control" name="operatorName" type="text" placeholder="姓名" onblur="checkRealName()">
			<label id="operatorNameMessage" class="help-block">请输入中文</label>
			
			<label>电话号码</label>
			<input type="text" name="operatorTel" class="form-control" placeholder="电话号码" id="operatorTel" onblur="checkTel()">
			<label id="operatorTelMessage" class="help-block">请输入有效联系方式</label>
		
			<label>权限：</label>
			<input name="levels" onchange="checkLevel()" type="checkbox"  value="1">用户管理
			<input name="levels" onchange="checkLevel()" type="checkbox" value="2">车位管理
			<input name="levels" onchange="checkLevel()" type="checkbox" value="3">合同管理
			<input name="levels" onchange="checkLevel()" type="checkbox" value="4">投诉管理
			<label id="operatorLevel" class="help-block">请选择权限</label>
		
			<button id="addoperator" type="submit" class="btn btn-info">增加</button>
		</spring:form>
	</div>
	<script type="text/javascript">
	function check(){
		var flag = checkUserName() && checkPassword()&&checkRealName()&&checkTel()&&checkLevel();
		return flag;
	}
	function checkUserName(){
		var userName = document.getElementById("userName").value;
		var userNameMessage = document.getElementById("userNameMessage");
		var eReg =  /^[a-zA-Z][a-zA-Z0-9]{5,19}$/;
		if (userName.length == 0) {
			userNameMessage.innerHTML = "密码不能为空";
			return false;
		} else if (!eReg.test(userName)) {
			userNameMessage.innerHTML = "密码必须以字母开头，且长度为6-20位";
			return false;
		} else {			
			return checkUserNameisExis(userName);
		}	
	}
	function checkUserNameisExis(userName){	
		var isExist=true;
		$.ajax({
			url:"findUserByName.do",
			type:"post",
			data:{"name":userName},
			async:false,
			success:function(msg){
				if(msg.userName!=undefined){
					//false表示存在用户
					isExist=false;
					$("#userNameMessage").html("用户名已存在");
				}else{
					userNameMessage.innerHTML = "写对啦！";
				}
			}
		})
		return isExist;
	}
	function checkPassword(){
		var password = document.getElementById("password").value;
		var passwordMessage = document.getElementById("passwordMessage");
		var eReg =  /^[a-zA-Z][a-zA-Z0-9]{5,19}$/;
		if (password.length == 0) {
			passwordMessage.innerHTML = "密码不能为空";
			return false;
		} else if (!eReg.test(password)) {
			passwordMessage.innerHTML = "密码必须以字母开头，且长度为6-20位";
			return false;
		} else {
			passwordMessage.innerHTML = "写对啦！";
			return true;
		}		
	}
	function checkRealName(){
		var operatorName = document.getElementById("operatorName").value;
		var operatorNameMessage = document.getElementById("operatorNameMessage");
		var eReg =   /^[\u4e00-\u9fa5]{2,10}$/;
		if (operatorName.length == 0) {
			operatorNameMessage.innerHTML = "姓名不能为空";
			return false;
		} else if (!eReg.test(operatorName)) {
			operatorNameMessage.innerHTML = "必须为2-10位的中文汉字";
			return false;
		} else {
			operatorNameMessage.innerHTML = "写对啦！";
			return true;
		}
	}
	function checkTel() {
		var operatorTel = document.getElementById("operatorTel").value;
		var operatorTelMessage = document.getElementById("operatorTelMessage");
		var eReg = /^1[34578]\d{9}$/;
		if (operatorTel.length == 0) {
			operatorTelMessage.innerHTML = "电话号码不能为空";
			return false;
		} else if (!eReg.test(operatorTel)) {
			operatorTelMessage.innerHTML = "电话号码格式不正确";
			return false;
		} else {
			operatorTelMessage.innerHTML = "写对啦！";
			return true;
		}
	}
	function checkLevel(){
		var operatorLevel = document.getElementById("operatorLevel");
		var flag = false;
		var checks = document.getElementsByTagName("input");
		for(var i=0; i<checks.length; i++)
		{
		  if (checks[i].name == "levels" && checks[i].checked) {
		  	flag=true;
		  	operatorLevel.innerHTML = "";
		  	break;
		  }
		}
		if(!flag){
			operatorLevel.innerHTML = "请选择权限";
		}
		return flag;
	}
	</script>
	
</body>
</html>